var middle = document.querySelector(".middle")
// console.log(middle)
// 获取当前用户的cookie
var name1 = getCookie("num")
var search = location.search
var o1 //创建全局变量方便使用数据库中的数据
if (search) {
    var id = search.split("=")[1];
} else {
    alert("非法进入")
    location = "./list.html";
}

(async function () {
    var txt = await PromiseAjax({
        url: './php/xiangqingye.php',
        data: `cartid=${id}`
    })
    // 把传入的字符串转为对象
    o1 = eval("(" + txt + ")");
    // c创建字符串拼接内容
    var str = ``

    str += `
      
        <div class="title" style="margin-top:90px">
            <div class="common">
                <span>${o1.cart_one_id} / ${o1.cart_two_id} / ${o1.cart_three_id}</span>
            </div>
        </div>
        <div class="goods_tab clearfix">
            <div class="common">
                <div class="top">
                    <div class="tableft"  onmouseover="fn1()">
                        <div class="litteimg">
                            <ul>
                                <li class="bg"><img src="${o1.goods_img3}" alt=""></li>
                                <li><img src="${o1.goods_img1}" alt=""></li>
                                <li><img src="${o1.goods_img2}" alt=""></li>
                                <li><img src="${o1.goods_img4}" alt=""></li>
                            </ul>
                        </div>
                        <div class="bigimg">
                            <img src="${o1.goods_img3}" alt="">
                            <div class="mark"></div>
                        </div>
                        <div class="detail">
                            <h2>${o1.goods_name}</h2>
                            <div class="bianma">
                                <span>产品编号:</span>
                                <span>${o1.cart_id}</span>
                            </div>
                            <div class="price">
                                <div>
                                    <span class="priceTitle">价格</span>
                                    <span class="fuHao">￥</span>
                                    <span class="discountPrice">${o1.goods_price}</span>
                                    <span class="discountFlag">5.5折</span>
                                </div>
                                <div>
                                    <span class="priceTitle">本店活动
                                    </span>
                                    <span class="huoDong">满一件，包邮</span>
                                </div>
                            </div>
                            <div class="chiMa">
                                <span>尺码</span>
                                <ul>
                                    <li class="bd">XS</li>
                                    <li>S</li>
                                    <li>M</li>
                                    <li>L</li>
                                    <li>XL</li>
                                </ul>
                            </div>
                            <div class="color">
                                <span>款式</span>
                                <ul>
                                    <li class="bd"><img src="${o1.goods_img3}" alt=""></li>
                            
                                </ul>
                            </div>
                            <div class="num">
                                <span>数量</span>
                                <div class="button">
                                    <div class="n">1</div>
                                    <div class="btn">
                                        <p>+</p>
                                        <p>-</p>
                                    </div>
                                </div>
                                <div class="maxNum">库存:<i>${o1.goods_number}</i>件</div>
                            </div>
                            <div class="buy">
                                <button type="button" class="addCart"> <i>加入购物车</i></button>
                                <a href='./shop.html' class="buyNow">立即购买</a>
                            </div>
                </div>
            </div>
            <div class="fdj"><img src="${o1.goods_img3}"  ></div>
            <div class="recommendright">
            <div>---- 热销推荐 ----</div>
            <div>
                <ul>
                    <li><img src="./images/xiangqingye/recommend1.jpg" alt="">
                        <span>￥</span><span>449</span>

                    </li>
                    <li><img src="./images/xiangqingye/recommend2.jpg" alt="">
                        <span>￥</span><span>399</span>
                    <li><img src="./images/xiangqingye/recommend3.jpg" alt="">
                        <span class="red">￥</span><span class="red">229</span>
                        <span>￥</span><span class="cuxiao">379</span>
                    </li>
                </ul>
                <div class="choose">
                    <img src="./images/xiangqingye/arrow1.png" alt="">
                    <img src="./images/xiangqingye/arrow2.png" alt="">
                </div>
            </div>

        </div>
        
    </div>
    <div class="cut"></div>
    <div class="bottom">
        <div class="bottomMenu">
            <span>新品NEW</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">连衣裙</a></li>
                <li><a href="#">牛仔裤</a></li>
                <li><a href="#">外套</a></li>
                <li><a href="#">衬衫/雪纺衫</a></li>
                <li><a href="#">针织衫</a></li>
                <li><a href="#">T恤</a></li>
                <li><a href="#">面料裤</a></li>
                <li><a href="#">西服</a></li>
                <li><a href="#">半身裙</a></li>
                <li><a href="#">羽绒服</a></li>
                <li><a href="#">毛呢大衣</a></li>
                <li><a href="#">皮衣</a></li>
            </ul>
            <span>活动专区</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">热销单品-6折畅购</a></li>
                <li><a href="#">入夏畅享惊喜3.8折</a></li>
                <li><a href="#">普/银/金卡会员2件8.8折/金卡会员3件8.5折</a></li>

            </ul>
            <span>商场同款新降折扣</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">连衣裙</a></li>
                <li><a href="#">牛仔裤</a></li>
                <li><a href="#">外套</a></li>
                <li><a href="#">衬衫/雪纺衫</a></li>
                <li><a href="#">休闲裤</a></li>
                <li><a href="#">卫衣</a></li>
                <li><a href="#">针织衫</a></li>
                <li><a href="#">T恤</a></li>
                <li><a href="#">西服</a></li>
                <li><a href="#">半身裙</a></li>
                <li><a href="#">羽绒服</a></li>
                <li><a href="#">毛呢大衣</a></li>
                <li><a href="#">皮衣</a></li>
            </ul>
            <span>连衣裙</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">牛仔连衣裙</a></li>
                <li><a href="#">PU连衣裙</a></li>
                <li><a href="#">针织连衣裙</a></li>
                <li><a href="#">休闲风连衣裙</a></li>
            </ul>
            <span>牛仔范</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">背带裤</a></li>
                <li><a href="#">直筒裤</a></li>
                <li><a href="#">高腰裤</a></li>
                <li><a href="#">拖地裤</a></li>
                <li><a href="#">破洞裤</a></li>
                <li><a href="#">阔腿裤</a></li>
                <li><a href="#">九分裤</a></li>
                <li><a href="#">短裤</a></li>
                <li><a href="#">半身裙</a></li>
                <li><a href="#">连衣裙</a></li>
                <li><a href="#">衬衫</a></li>
                <li><a href="#">外套</a></li>
            </ul>
            <span>跨界联名</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">Tom & Jerry</a></li>
                <li><a href="#">小鹿斑比</a></li>
                <li><a href="#">米奇米妮</a></li>
                <li><a href="#">吾皇猫</a></li>
                <li><a href="#">跳跳虎</a></li>
                <li><a href="#">史迪奇</a></li>
                <li><a href="#">灰姑娘</a></li>
                <li><a href="#">小飞象</a></li>
                <li><a href="#">小黄人</a></li>
                <li><a href="#">Smiley</a></li>
                <li><a href="#">蜡笔小新</a></li>
                <li><a href="#">狮子王</a></li>
                <li><a href="#">乐一通</a></li>
                <li><a href="#">史努比</a></li>
                <li><a href="#">唐老鸭</a></li>
                <li><a href="#">RICK&MORTY</a></li>
                <li><a href="#">玩具总动员</a></li>
                <li><a href="#">黛丝</a></li>
            </ul>
            <span>线上专享</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">外套</a></li>
                <li><a href="#">上装</a></li>
                <li><a href="#">裤装</a></li>
                <li><a href="#">裙装</a></li>
            </ul>
            <span>裙装</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">连衣裙</a></li>
                <li><a href="#">半身裙</a></li>
            </ul>
            <span>裤装</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">牛仔裤</a></li>
                <li><a href="#">休闲裤</a></li>
                <li><a href="#">短裤</a></li>
                <li><a href="#">背带/连体裤</a></li>
            </ul>
            <span>上装</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">针织衫</a></li>
                <li><a href="#">卫衣</a></li>
                <li><a href="#">T恤</a></li>
                <li><a href="#">衬衫</a></li>
                <li><a href="#">雪纺衫</a></li>
            </ul>
            <span>外套</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">羽绒服</a></li>
                <li><a href="#">毛呢</a></li>
                <li><a href="#">皮衣/皮草</a></li>
                <li><a href="#">棉服</a></li>
                <li><a href="#">风衣/外套</a></li>
                <li><a href="#">西服</a></li>
                <li><a href="#">马甲</a></li>
            </ul>
            <span>配饰</span>
            <ul>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">包包</a></li>
                <li><a href="#">帽子/围巾</a></li>
            </ul>
        </div>
        <div class="contentimgs">
        ${o1.goods_introduce}
    </div>
    <div class="recommendright">
                        <div>---- 猜你喜欢 ----</div>
                        <div>
                            <ul>
                                <li><img src="./images/xiangqingye/recommend4.jpg" alt="">
                                    <span>￥</span><span>449</span>

                                </li>
                                <li><img src="./images/xiangqingye/recommend5.jpg" alt="">
                                    <span class="red">￥</span><span class="red">399</span>
                                    <span>￥</span><span class="cuxiao">699</span>
                                <li><img src="./images/xiangqingye/recommend6.jpg" alt="">
                                    <span class="red">￥</span><span class="red">229</span>
                                    <span>￥</span><span class="cuxiao">379</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `
    middle.innerHTML = str
})()

//给盒子绑定点击事件
middle.onclick = function (e) {
    var e = e || window.event
    var tg = e.target || e.srcElement
    if (tg.innerHTML == "加入购物车") {
        // 先判断当前是否有用户
        if (name1) {
            // 获取当前用户在localStorage的中的商品数据
            var lists = localStorage.getItem(name1) || "[]"
            // console.log(lists)
            // 把获取的数据转为数组
            lists = eval("(" + lists + ")")

            // 判断当前localStorage中是否有数据
            if (lists.length > 0) {
                // 设置开关判断，true表示商品存在，false表示不存在
                var bool = false
                //遍历lists数组
                lists.forEach(item => {

                    // 判断商品id是否相同
                    if (o1.cart_id == item.cart_id) {
                        item.cart_number++
                        bool = true
                    }
                })
                if (bool) {
                    // 把当前数组添加到localStorage中
                    localStorage.setItem(name1, JSON.stringify(lists))
                } else {

                    // 修改商品的数量
                    o1["cart_number"] = 1
                    // 直接把商品添加到数组中
                    lists.push(o1)
                    // 直接把当前数组添加到localStorage中
                    localStorage.setItem(name1, JSON.stringify(lists))
                    alert("已添加到购物车")
                }

            } else {
                // 修改商品的数量
                o1["cart_number"] = 1
                // 直接把商品添加到数组中
                lists.push(o1)
                // 直接把当前数组添加到localStorage中
                localStorage.setItem(name1, JSON.stringify(lists))

            }


        } else {
            alert("您还未登录")
            // 获取当前地址方便跳转回来当前位置
            var url = location.href
            location = "./login.html?url2=" + url

        }
    }


}



//创建放大镜函数
function fn1() {
    //把大盒子中需要操作的元素获取，并赋值给实例属性
    var leftBox = document.querySelector('.bigimg')
    var mark = document.querySelector('.mark')
    var rightBox = document.querySelector('.fdj')
    var rightImg = rightBox.querySelector('img')
    var lis = document.querySelector(".litteimg").children[0].children

//遍历li对象
for (var i = 0; i < lis.length; i++) {
    //给每个li对象绑定点击事件
    lis[i].onclick = function () {
        //清除所有li对象中的class属性
        for (var j = 0; j < lis.length; j++) {
            lis[j].className = ''
        }
        //获取当前li对象中img的图片地址
        var url = this.lastElementChild.getAttribute('src')
        //把当前图片地址赋值给上面的图片
        leftBox.firstElementChild.setAttribute('src', url)
        rightImg.setAttribute('src', url)
        //给当前点击的li对象添加class属性
        this.className = 'bg'
    }
}


    //给左边盒子绑定事件
    leftBox.onmouseover = function () {
        //显示蒙版层和右边盒子
        mark.style.display = 'block'
        rightBox.style.display = 'block'
    }
    leftBox.onmouseout = function () {
        //隐藏蒙版层和右边盒子
        mark.style.display = 'none'
        rightBox.style.display = 'none'
    }
    //给leftbox绑定鼠标移动事件
    leftBox.onmousemove = function (e) {
        //兼容事件对象
        var e = e || window.event
        // console.log(leftBox.offsetLeft)
        //获取蒙版层的移动距离
        var left1 = e.pageX - leftBox.offsetLeft - parseInt(mark.offsetWidth / 1.02)
        var top1 = e.pageY - leftBox.offsetTop - parseInt(mark.offsetHeight / 1.02)
        // console.log(mark.offsetWidth)
        //给蒙版层设置边界 
        var maxX = leftBox.offsetWidth - mark.offsetWidth
        // console.log(maxX)
        var maxY = leftBox.offsetHeight - mark.offsetHeight
        //右边图片的移动距离
        var imgX, imgY
        //判断水平方向
        if (left1 <= 0) {
            mark.style.left = "0px"
            imgX = 0
        } else if (left1 >= maxX) {
            mark.style.left = maxX + 'px'
            imgX = maxX
        } else {
            mark.style.left = left1 + 'px'
            imgX = left1
        }

        //垂直方向
        if (top1 <= 0) {
            mark.style.top = "0px"
            imgY = 0
        } else if (top1 >= maxY) {
            mark.style.top = maxY + 'px'
            imgY = maxY
        } else {
            mark.style.top = top1 + 'px'
            imgY = top1
        }
        // 获取需要移动的倍数关系
        var x1 = (rightImg.offsetWidth - rightBox.offsetWidth) /
            (leftBox.offsetWidth - mark.offsetWidth)
        var y1 = (rightImg.offsetHeight - rightBox.offsetHeight) /
            (leftBox.offsetHeight - mark.offsetHeight)
        //移动右边的图片
        rightImg.style.left = -x1 * imgX + 'px'
        rightImg.style.top = -y1 * imgY + 'px'
    }

}